@import "header.html"
<link rel="stylesheet" href="../css/cancel_order2.css">
<body>
<header class="fxj-header">
    <back></back>
    <h1 class="fxj-title">取消订单</h1>
</header>
<main id="main">
    <section class="cause">
        <ul class="">
            <li class="line-transverse" onclick="selectCause('5')">
                <span>行程变更</span>
                <span class="yuan" :class="{selected:cancelCause==='5'}"></span>
            </li>
            <li class="line-transverse" onclick="selectCause('6')">
                <span>房间实际与描述图片不符</span>
                <span class="yuan" :class="{selected:cancelCause==='6'}"></span>
            </li>
            <li class="line-transverse" onclick="selectCause('7')">
                <span>房东态度不好</span>
                <span class="yuan" :class="{selected:cancelCause==='7'}"></span>
            </li>
            <li class="line-transverse" onclick="selectCause('8')">
                <span>房东临时涨价</span>
                <span class="yuan" :class="{selected:cancelCause==='8'}"></span>
            </li>
            <li class="line-transverse" onclick="selectCause('9')">
                <span>房源设施发生故障无法继续入住</span>
                <span class="yuan" :class="{selected:cancelCause==='9'}"></span>
            </li>
            <li class="" onclick="selectCause('10')">
                <span>其他原因</span>
                <span class="yuan" :class="{selected:cancelCause==='10'}"></span>
            </li>
            <li v-show="cancelCause==='10'" class="ipt-cause" v-cloak>
                <textarea placeholder="请输入取消订单原因" rows="4"></textarea>
                <button onclick="reqCancleOrderDetail()">提交</button>
            </li>
        </ul>
    </section>

    <section class="refund-container">
        <div>
            <h1>退款原因</h1>
            <p>您取消了订单，根据收费规则，将扣除未住2天的定金为违约金支付给房东，</p>
        </div>
    </section>
</main>
@import "js.html"
<script src="../script/cancel_order.js"></script>
</body>
@import "footer.html"